<template>

	<view class="notice-page">

		<!-- 消息列表 -->
		<view class="notice-list">
			<view class="notice-item" v-for="(item, idx) in noticeList" :key="idx">
				<view class="notice-date">{{ item.created_at }}</view>
				<view class="notice-content-box">
					<view class="notice-title">{{ item.title }}</view>
					<view class="notice-content">{{ item.description }}</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 加载状态提示 -->
	<view v-if="loading" class="loading-text">{{noMore}}</view>
</template>

<script setup>
	import { ref,reactive } from "vue"
	import { getNoticeList } from "@/api/notice.js";
	import { onReachBottom,onPullDownRefresh } from "@dcloudio/uni-app"
	const page = ref(1);
	const pageSiza = ref(10)
	const lastPage=ref(1)
	const noticeList = reactive([]);
	const loading = ref(false);
	const noMore = ref("加载中...");
	const getList = async () => {
		let res = await getNoticeList({page:page.value,pageSize:pageSiza.value,type:"notice"}).then((result) => {
			if (page.value === 1) {
				// 第一页直接赋值
				Object.assign(noticeList, result.data);
			} else {
				// 追加数据
				noticeList.push(...result.data);
			}
			page.value = result.current_page;
			lastPage.value = result.last_page;
		}).finally(() => {
      uni.stopPullDownRefresh();
    });
	};
	getList();

	onReachBottom(()=>{
		loading.value=true;
		if(lastPage.value<=page.value){
			noMore.value="没有更多了";
			// 3秒后重置noMore状态
			setTimeout(() => {
				loading.value = false;
			}, 3000);
		}else{
			noMore.value="加载中...";
			page.value+=1;
			getList();
		}
	});
	onPullDownRefresh(()=>{
		loading.value=false;
		noMore.value = false;
		page.value=1;
		noticeList.splice(0, noticeList.length);
		getList();

	});

	const back = ()=>{
		uni.navigateBack();
	}
</script>

<style lang="scss" scoped>
.notice-page {
	min-height: 100vh;
	background: #f6f7fb;
	display: flex;
	flex-direction: column;
}

.top-title {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
	color: #fff;
	font-weight: bold;
}
.top-placeholder {
	width: 40rpx;
}
.notice-list {
	padding: 24rpx 0 40rpx 0;
}
.notice-item {
	margin: 0 0 32rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.notice-date {
	background: #bdbdbd;
	color: #fff;
	font-size: 22rpx;
	border-radius: 16rpx;
	padding: 6rpx 32rpx;
	margin-bottom: 12rpx;
}
.notice-content-box {
	background: #fff;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
	padding: 18rpx 20rpx 20rpx 20rpx;
	width: 90vw;
	max-width: 700rpx;
}
.notice-title {
	font-size: 28rpx;
	color: #222;
	font-weight: bold;
	margin-bottom: 10rpx;
}
.notice-content {
	font-size: 24rpx;
	color: #444;
	line-height: 1.7;
	word-break: break-all;
}
.back-icon image{
	width: 40rpx;
	height: 40rpx;
}
.loading-text, .no-more-text {
    text-align: center;
    padding: 20rpx;
    color: #999;
	background: #f6f7fb;;
  }
</style>
